import React from "react";
import {Table, Layout, Input, Button} from "element-react";
import Styles from '../css/AppHome.module.css';
import {HomeState} from "../data/Home";
import {Http} from "../config/Http";
import {Urls} from "../config/Urls";

export class AppHome extends React.Component<any, HomeState> {
    constructor(props: any) {
        super(props);
        this.state = {
            servers: []
        }
    }

    private showCreateServer(): void {
        this.setState({})
    }

    private search(value: any) {
        // Http.get<any>(Urls.GET_GROUP_SERVER).then(data => {
        //
        // })
        this.setState((state, prop)=>({
            servers: state.servers.concat({name:'adssd',status:'asd',runtime:'asd',startTime:'asd'})
        }))
    }


    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        const columns = [
            {
                label: "服务名称",
                prop: "name"
            },
            {
                label: "服务状态",
                prop: "status"
            },
            {
                label: "运行时长",
                prop: "runtime"
            },
            {
                label: "启动时间",
                prop: "startTime"
            }
        ];
        return <div className={'container'}>
            <Layout.Row type={'flex'} justify={'center'}>
                <Layout.Col span={22}>
                    <Input onChange={this.search.bind(this)} icon="search" placeholder="输入关键字搜索"/>
                </Layout.Col>
            </Layout.Row>
            <Layout.Row className={Styles.padding} type={'flex'} justify={'center'}>
                <Layout.Col span={22}>
                    <Button type={"primary"} size={"small"} onClick={this.showCreateServer.bind(this)}>新建服务</Button>
                </Layout.Col>
            </Layout.Row>
            <Layout.Row type={'flex'} justify={'center'}>
                <Layout.Col span={22}>
                    <Table columns={columns} data={this.state.servers}/>
                </Layout.Col>
            </Layout.Row>
        </div>;
    }
}